<template>
  <div class="third-login">
    <div class="third-login-container">
      <Header :plusGoRouter="true">
        <span slot="extra">忘记密码</span>
      </Header>
      <div class="container-wrapper">
        <div class="desc">
          输入手机号
        </div>
        <div class="user-info marginBottom38">
          <input
            v-model="loginInfo.phone"
            type="tel"
            placeholder="请输入手机号"
            class="form-input"
            maxlength="11"
          >
          <i
            @tap="clearPhone"
            class="jeicon jeicon-error-circle delete"
          />
        </div>
        <div class="user-info-pwd-message ">
          <input
            v-model="loginInfo.validateCode"
            type="number"
            placeholder="请输入验证码"
            class="form-input"
            oninput="if(value.length>6)value=value.slice(0,6)"
            maxlength="6"
            pattern="\d*"
          >
          <button
            @tap="getValidateCode"
            class="get-validate-code"
          >
            <span v-show="sendAuthCode">获取</span>
            <span v-show="!sendAuthCode">{{ auth_time }}s</span>
          </button>
        </div>
        <button
          @tap="next"
          class="next-btn"
        >
          下一步
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchSearchUserCode,
  fetchSendValidateCode,
  fetchCheckValidate,
} from '../../actions/login';
import { validate, toastValidate } from '../../../../util/validate';
// import { pageContainer } from '@/helper/plugin';
import { openWindow } from '@/helper';
import Header from '@/components/header';

export default {
  name: 'ForgetPwd',
  components: {
    Header,
  },
  data() {
    return {
      loginInfo: {},
      sendAuthCode: true, // 判断
      auth_time: 0,
    };
  },
  created() {},
  mounted() {
    // pageContainer('third-login-container');
  },
  methods: {
    // 下一步
    async next() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
        || !toastValidate(
          '',
          validate.isPhone(this.loginInfo.phone),
          '手机号格式不正确',
        )
        || (!this.loginState
          && !toastValidate(
            '验证码',
            validate.isNull(this.loginInfo.validateCode),
          ))
      ) {
        return false;
      }

      // 校验验证码
      const validateCodeRes = await fetchCheckValidate({
        email: this.loginInfo.phone,
        type: 'PHONE',
        cz: 'ZH',
        code: this.loginInfo.validateCode,
      });
      if (validateCodeRes.success) {
        this.$router.push({
          path: '/JE-PLUGIN-LOGIN/Reset_pwd',
          id: '__setNewPwdView',
          title: '忘记密码',
          query: {
            backUserCode: this.loginInfo.phone,
            validateCode: this.loginInfo.validateCode,
          },
        });
        // const userRes = await fetchSearchUserCode({
        //   userCode: this.loginInfo.phone,
        // });
        // if (userRes.success) {
        //   const companylist = userRes.obj;
        //   if (companylist.length > 0 && companylist.length <= 1) {
        //     openWindow({
        //       url: './pages_setNewPwd_index.html',
        //       id: '__setNewPwdView',
        //       title: '忘记密码',
        //       extras: {
        //         phone: this.loginInfo.phone,
        //         validateCode: this.loginInfo.validateCode,
        //         deptId: companylist[0].DEPTID || 'default',
        //       },
        //     });
        //   } else {
        //     openWindow({
        //       url: './pages_companyList_index.html',
        //       id: '__companyListView',
        //       title: '公司列表',
        //       extras: {
        //         phone: this.loginInfo.phone,
        //         validateCode: this.loginInfo.validateCode,
        //       },
        //     });
        //   }
        // }
      } else {
        mui.toast(validateCodeRes.message);
        return false;
      }
    },
    // 获取验证码
    async getValidateCode() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
        || !toastValidate(
          '',
          validate.isPhone(this.loginInfo.phone),
          '手机号格式不正确',
        )
      ) {
        return false;
      }
      if (this.sendAuthCode) {
        const res = await fetchSendValidateCode({
          email: this.loginInfo.phone,
          type: 'PHONE',
          cz: 'ZH',
        });
        mui.toast(res.obj);
        if (res.success) {
          this.sendAuthCode = false;
          this.auth_time = 59;
          const auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
        }
      }
    },
    clearPhone() {
      this.loginInfo.phone = '';
    },
  },
};
</script>

<style lang="less" scoped>
@import "./style/index.less";
</style>
